<template>
  <tr repeat.for="user of users">
    <td class="text-xs-center">
      <div class="avatar">
        <img src.bind="'img/avatars/'+ user.avatar" class="img-avatar" alt="admin@bootstrapmaster.com">
                                        <span class="avatar-status" ng-class="{ 'tag-success' : user.status == 'active',
                                                                                'tag-warning' : user.status == 'away',
                                                                                'tag-danger'  : user.status == 'busy',
                                                                                'tag-default' : user.status == 'offline' }"></span>
      </div>
    </td>
    <td>
      <div>${ user.name }</div>
      <div class="small text-muted">
        <span if.bind="user.new == true">New</span>
        <span if.bind="user.new == false">Recurring</span>
        | Registered: ${ user.registered }
      </div>
    </td>
    <td class="text-xs-center">
      <img src.bind="'img/flags/'+ user.flag " alt="${ user.country }" style="height:24px;">
    </td>
    <td>
      <div class="clearfix">
        <div class="float-xs-left">
          <strong>${ user.usage }%</strong>
        </div>
        <div class="float-xs-right">
          <small class="text-muted">${ user.period }</small>
        </div>
      </div>
      <progress class="progress progress-xs ${user.usage <= 25 ? 'progress-info' : ''}
      ${user.usage > 25 && user.usage <= 50 ? 'progress-success' : ''}
      ${user.usage > 50 && user.usage <= 75 ? 'progress-warning' : ''}
      ${user.usage > 75 && user.usage <= 100 ? 'progress-danger' : ''} "
                value="${ user.usage }" max="100" style="margin:5px 0 0 0;">${ user.usage }%
      </progress>
    </td>
    <td class="text-xs-center">
      <i class="fa
      ${ user.payment == 'mastercard' ? 'fa-cc-mastercard' : ''}
      ${ user.payment == 'visa' ? 'fa-cc-visa' : ''}
      ${ user.payment == 'amex' ? 'fa-cc-amex' : ''}
      ${ user.payment == 'diners' ? 'fa-cc-diners-club' : ''}
      ${ user.payment == 'stripe' ? 'fa-cc-stripe' : ''}
      ${ user.payment == 'paypal' ? 'fa-paypal' : ''}
      ${ user.payment == 'google' ? 'fa-google-wallet' : ''}"
         style="font-size:24px"></i>
    </td>
    <td>
      <div class="small text-muted">Last login</div>
      <strong>${ user.activity }</strong>
    </td>
  </tr>

</template>
